<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 240px;margin-right: 5px" placeholder="请输入姓名进行查询" prefix-icon="Search"/>
      <el-button type="primary" style="margin-right: 2px">查询</el-button>
      <el-button type="warning">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary" style="margin-right: 2px">新增</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="info">导入</el-button>
      <el-button type="success">导出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.books" stripe>
        <el-table-column prop="id" label="编号"/>
        <el-table-column prop="name" label="书籍"/>
        <el-table-column prop="author" label="作者"/>
        <el-table-column label="操作">
          <el-button type="success" @click="getBook()">详情</el-button>
          <el-button type="primary">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
            v-model:current-page="data.pageNUm"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            background
            layout="total,sizes,prev,pager,next,jumper"
            :total="data.total"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, reactive} from "vue";
import axios from "axios";

const data = reactive({
  books: [],
  pageNUm: 1,
  pageSize: 10,
  total: 47
})
const getBooks = function () {
  axios.get('http://localhost:8090/api/book/findAll').then(res => {
    data.books = res.data
  })
}
onMounted(() => {
  getBooks()
})
</script>

<style scoped>
.card {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px 5px lavender;
  background-color: white;
}
</style>